<!--
 * @Author: dzj
 * @Date: 2021-11-19 18:12:03
 * @Description: 
-->
<template>
  <div>
    <!-- <el-header>
      <span class="siteIcon" style="font-size: 24px; color: #e9eef3">
        <img
          src="../assets/no_border.png"
          @click="returnlink"
          style="height: 70px"
        />
      </span>
      <span class="return">
        <el-button
          type="text"
          @click="returnlink"
          style="font-size: 24px; color: #e9eef3"
          >回到首页</el-button
        >
      </span>
      <el-dropdown class="cyr-drop">
        <span class="el-dropdown-link">
          用户{{ $store.getters.userName }}，您好！
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="returnmydoor">我的门户</el-dropdown-item>
            <el-dropdown-item divided @click="returnmydoor2"
              >账户信息</el-dropdown-item
            >
            <el-dropdown-item divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header> -->
    <search :input1="input" :typeGroup1="typeGroup" :value1="value"></search>
    <div class="content">
      <h2 align="left" style="color: rgb(50 170 227)">{{ file.title_top }}</h2>
      <p align="left" style="color: #a9b0b7">{{ file.title_bottom }}</p>
      <div>
        <el-button size="mini" style="float: left" @click="read(this.id)"
          >在线阅读</el-button
        >
        <el-button
          size="mini"
          style="float: left; margin-left: 15px"
          @click="download(this.id, file.title_top)"
          >下载</el-button
        >
        <el-button
          size="mini"
          style="float: left; margin-left: 15px"
          @click="exporting(this.id)"
          >导出</el-button
        >
        <el-dialog
          v-model="dialogVisible"
          title="引文格式"
          width="30%"
          :before-close="handleClose"
        >
          <span>[1]{{ file.exp_ref }}</span>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogVisible = false"
                >确定</el-button
              >
            </span>
          </template>
        </el-dialog>
      </div>
      <h5
        align="left"
        :class="{ class1: 'true' == 'true', class2: status1 }"
        style="width: 100%"
      >
        摘要：{{ file.abstract }}
      </h5>
      <h6
        v-if="this.file.abstract !== '--'"
        class="seeall"
        align="left"
        style="
          color: rgb(61 119 207);
          margin-top: 0px;
          margin-left: 30px;
          margin-bottom: 5px;
        "
        @click="changesee"
        v-show="status1"
      >
        查看全部>>
      </h6>
      <h6
        class="seeall"
        align="left"
        style="
          color: rgb(61 119 207);
          margin-top: 0px;
          margin-left: 30px;
          margin-bottom: 5px;
        "
        @click="changesee"
        v-show="!status1"
      >
        收起>>
      </h6>
      <div style="margin-top: 10px; display: flex; flex-flow: row nowrap">
        <h5 align="left">关键词:</h5>
        <h5
          class="title"
          v-for="key1 in file.key_words"
          :key="key1.index"
          style="margin-left: 10px"
          @click="gosearch(key1)"
        >
          {{ key1 }}
        </h5>
      </div>
      <div style="margin-top: 10px; display: flex; flex-flow: row nowrap">
        <h5 align="left">作者:</h5>
        <h5
          class="title"
          v-for="author1 in file.author"
          :key="author1.index"
          style="margin-left: 10px"
          @click="goauthor(author1.id)"
        >
          {{ author1.name }}
        </h5>
      </div>
      <div style="margin-top: 10px; display: flex; flex-flow: row nowrap">
        <h5 align="left">作者单位:</h5>
        <h5
          class="title"
          v-for="de1 in file.source"
          :key="de1.index"
          style="margin-left: 10px"
          @click="godep(de1.id)"
        >
          {{ de1.name }}
        </h5>
      </div>
      <div style="margin-top: 10px; display: flex; flex-flow: row nowrap">
        <h5 align="left">语种:</h5>
        <h5 style="margin-left: 10px">
          {{ file.language_type }}
        </h5>
      </div>
      <div style="margin-top: 10px; display: flex; flex-flow: row nowrap">
        <h5 align="left">分类:</h5>
        <h5 style="margin-left: 10px">
          {{ file.department }}
        </h5>
      </div>
      <div style="margin-top: 10px; display: flex; flex-flow: row nowrap">
        <h5 align="left">在线出版日期:</h5>
        <h5 style="margin-left: 10px">
          {{ file.date }}
        </h5>
      </div>
    </div>
    <div style="padding-bottom: 4%">
      <el-card
        class="box-card"
        style="width: 80%; margin-left: 10%; margin-top: 30px"
      >
        <div>
          <h4 align="left" style="color: rgb(61 119 207); margin-bottom: 30px">
            参考文献({{ file.refer.length }})
          </h4>
          <h5
            align="left"
            v-for="(item, index) in this.refer"
            :key="index"
            style="margin-left: 40px"
          >
            [{{ index + start }}]{{ item }}
          </h5>
        </div>
        <div
          style="
            padding-top: 20px;
            padding-bottom: 20px;
            margin: 0 auto;
            width: 20%;
          "
        >
          <el-pagination
            v-if="refer_totalpage"
            background
            layout="prev, pager, next"
            :total="refer_totalpage"
            :page-size="5"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
          <span v-if="!refer_totalpage" style="color: #c6c6cd"
            >暂 无 参 考 文 献</span
          >
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import search from "../views/Search.vue";
import axios from "axios";
import { toRaw } from "@vue/reactivity";
import { ElMessage } from 'element-plus';
export default {
  components: { search },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    if (to.path === "/searchpreview" || to.path === "/detail") {
      if (Object.keys(to.params).length !== 0) {
        console.log(!0);
        localStorage.setItem("input", to.params.input);
        localStorage.setItem("typeGroup", JSON.stringify(to.params.typeGroup));
        localStorage.setItem("value", to.params.value);
      }
      //     axios.post('code/',input,typeGroup,value).then((response) => {
      //   this.$router.push('/searchpreview/'+this.input+response)
      // })
      next();
      location.reload();
    } else {
      next();
    }
  },
  data() {
    return {
      id: "",
      dialogVisible: false,
      types: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "期刊",
        },
        {
          value: "3",
          label: "会议",
        },
      ],
      options: [
        {
          value: "year",
          label: "关键词",
        },
        {
          value: "month",
          label: "篇名",
        },
        {
          value: "day",
          label: "作者",
        },
      ],
      history: [
        {
          value: "year",
          label: "li",
        },
        {
          value: "month",
          label: "睡眠",
        },
        {
          value: "day",
          label: "英语",
        },
      ],
      file: { refer: [] },
      // file: {
      //   number: 1,
      //   name: "基于波动与扩散物理系统的机器学习",
      //   English: "English Title",
      //   type: "期刊论文",
      //   author: [{id:1,name:"陈江芷"}, {id:2,name:"杨晨"}, {id:3,name:"温任捷"}],
      //   source: "《物理学报》 2021年14期",
      //   abstract:
      //     "物理学在机器学习中的应用以及两者的交叉融合正引起广泛关注,尤其是在波动系统和扩散系统中.本文重点关注波动与扩散物理系统和机器学习之间的内在联系以及对机器学习算法和物理实现的推进作用,综述了波动系统和扩散系统中的机器学习研究,介绍了部分最新研究成果.文中首先讨论了监督学习的波动系统实现,包括神经网络的波动光学实现、量子搜索的波动实现、基于波动系统的递归神经网络以及神经形态的非线性波动计算.接着,文中继续讨论了受扩散系统启发的机器学习算法,如基于扩散动力学的分类算法,基于热扩散的数据挖掘和信息过滤,以及基于群体扩散的搜索优化等.波动系统以其天然的并行性、高效、低能耗等优势,通过丰富的波动力学和波动物理现象进行计算或算法模拟,正成为机器学习的新型物理载体.扩散系统中的物理机制可以启发构建高效的机器学习算法,用于复杂系统和物理学研究中的分类、优化等问题.期望通过对波动、扩散物理系统与机器学习内在联系的讨论,能够为开发物理启发的新算法和硬件实现甚至软硬一体化带来抛砖引玉的启示. ",
      //   key_words: ["波动系统", "扩散系统", "机器学习", "人工神经网络"],
      //   department: ["重庆大学"],
      //   language: "中文",
      //   ISBN: "U467.14",
      //   date: "2021-07-01",
      //   refer: ["123457890", "1234567890"],
      // },
      refer: [],
      refer_totalpage: 0,
      start: 1,
      input: "",
      value: "",
      typeGroup: [],

      status1: true,
      myStyle: {
        position: "relative",
        width: 100 + "px",
        height: 100 + "px",
        backgroundColor: "red",
      },
    };
  },
  methods: {
    returnlink() {
      this.$router.push("/");
    },
    search_his(value) {
      this.input = value;
    },
    changesee() {
      this.status1 = !this.status1;
    },
    gosearch(key1) {
      console.log(this.typeGroup);
      console.log(this.value);
      if (key1 === "--") {
        console.log(1)
      } else {
        this.$router.push({
          name: "SearchPreview",
          params: {
            input: key1,
            typeGroup: this.typeGroup, //后需更改
            value: "key",
          },
        });
      }
    },
    //分页
    getList(data, num, size) {
      let list;
      list = data.slice((num - 1) * size, num * size);
      return list;
    },
    handleCurrentChange(val) {
      let row_list = toRaw(this.file.refer);
      this.refer = this.getList(row_list, val, 5);
      this.start = (val - 1) * 5 + 1;
    },
    //查看作者门户
    goauthor(id) {
      if (id === 0) {
        ElMessage('该作者没有门户')
      }else if(id==="--"){
        console.log(1)
      }
       else if (id === this.$store.getters.id) {
        this.$router.push("/mydoor");
      } else {
        this.$router.push({
          name: "Door",
          params: {
            id: id,
          },
        });
      }
    },
    //查看作者单位
    godep(id) {
      if (id === 0) {
        ElMessage('该机构没有门户')
      }else if(id==="--"){
        console.log(1)
      } else if (id === this.$store.getters.id) {
        this.$router.push("/mycompanydoor");
      } else {
        this.$router.push({
          name: "Companydoor",
          params: {
            id: id,
          },
        });
      }
    },
    //下载
    download(id, name) {
      if (!this.$store.getters.isLogin) {
        ElMessage.error("您尚未登录，请先登录！");
      } else {
        axios.post("detail/", { acd_ach_id: id }).then((res) => {
          if (res.data.code === 0) {
            if (res.data.download === false) {
              ElMessage.error("该学术成果暂不支持下载！");
            } else {
              console.log(res);
              this.url = res.data.file_path;
              console.log(this.url);
              // let url = "https://spectreattack.com/spectre.pdf";
              fetch(this.url, {
                method: "get",
                responseType: "arraybuffer",
              })
                .then(function (res) {
                  if (res.status !== 200) {
                    return res.json();
                  }
                  return res.arrayBuffer();
                })
                .then((blobRes) => {
                  // 生成 Blob 对象，设置 type 等信息
                  const e = new Blob([blobRes], {
                    type: "application/pdf",
                    "Content-Disposition": "attachment",
                  });
                  // 将 Blob 对象转为 url
                  const url = window.URL.createObjectURL(e);
                  const link = document.createElement("a"); // 创建a标签
                  link.style.display = "none"; // 将a标签隐藏
                  // link.target = "_blank";
                  // link.href = "http://127.0.0.1:8000/media/spectre.pdf"; // 给a标签添加下载链接
                  link.href = url;
                  link.download = name;
                  // link.setAttribute('download', '授权协议书') // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
                  document.body.appendChild(link);
                  link.click(); // 执行a标签
                })
                .catch((err) => {
                  console.error(err);
                });
              // let blobRes = "https://spectreattack.com/spectre.pdf";
              // const e = new Blob([blobRes], {
              //   type: "application/octet-stream",
              //   "Content-Disposition": "attachment",
              // });
              // const url = window.URL.createObjectURL(e);
              // // window.open("http://127.0.0.1:8000/media/1.docx")
              // const link = document.createElement("a"); // 创建a标签
              // link.style.display = "none"; // 将a标签隐藏
              // // link.target = "_blank";
              // // link.href = "http://127.0.0.1:8000/media/spectre.pdf"; // 给a标签添加下载链接
              // link.href = url;
              // link.download = true;
              // // link.setAttribute('download', '授权协议书') // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
              // document.body.appendChild(link);
              // link.click(); // 执行a标签
            }
          }
        });
      }
    },
    //在线阅读
    read(id) {
      axios.post("detail/", { acd_ach_id: id }).then((res) => {
        if (res.data.code === 0) {
          if (res.data.file_path === "--") {
            ElMessage("目前未收集该学术成果！");
          } else {
            console.log(res);
            this.url = res.data.file_path;
            console.log(this.url);

            window.open(this.url);
            // const link = document.createElement("a"); // 创建a标签
            // link.style.display = "none"; // 将a标签隐藏
            // link.target = "_blank";
            // link.href = "https://spectreattack.com/spectre.pdf"; // 给a标签添加下载链接
            // // link.setAttribute('download', '授权协议书') // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
            // document.body.appendChild(link);
            // link.click(); // 执行a标签
          }
        }
      });
    },
    //单个导出
    exporting(number) {
      //后端提供txt文件
      this.dialogVisible = true;
      console.log(number);
      // let list = [];
      // list.push(number);
      // axios.post("exp_ref/", { acd_ach_id: list }).then((res) => {
      //   if (res.data.code === 0) {
      //     console.log(res);
      //     this.url = res.data.url;
      //     console.log(this.url);
      //     alert("导出成功！");

      //     // window.location.href = this.url;
      //     window.open(this.url);
      //   }
      // });
    },
  },

  created() {
    this.input = localStorage.getItem("input");
    // this.history=
    this.typeGroup = JSON.parse(localStorage.getItem("typeGroup"));
    this.value = localStorage.getItem("value");
    // this.id=localStorage.getItem("id");
    console.log(this.$route.params.id);
    //axios获取请求，更新file
    let a = localStorage.getItem("id");
    this.id = a;
    console.log(a);
    axios.post("detail/", { acd_ach_id: a }).then((res) => {
      this.file = res.data;
      if(res.data.author==="--"){
        this.file.author=[{id:"--",name:"--"}]
      }
      if(res.data.source==="--"){
        this.file.source=[{id:"--",name:"--"}]
      }
      if(res.data.key_words==="--"){
        this.file.key_words=["--"]
      }
      console.log(this.file.refer);
      if (this.file.refer.length !== 0) {
        console.log(this.file.refer.length);
        let row_list = toRaw(this.file.refer);
        this.refer_totalpage = Math.ceil(row_list.length);
        console.log(row_list);
        this.refer = this.getList(row_list, 1, 5);
        console.log(this.refer);
      }
    });
  },
};
</script>

<style scoped>
.el-header {
  background-color: #1047b4;
  color: #1047b4;
  text-align: center;
  line-height: 60px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.return .el-button--text {
  border-color: transparent;
  color: var(--el-color-primary);
  background: 0 0;
  padding-left: 30%;
  padding-right: 0;
  font-weight: 600;
}
.siteIcon {
  position: absolute;
  left: 100px;
  top: -5px;
  color: #e9eef3;
}
.return {
  position: absolute;
  left: 200px;
  top: 2px;
  color: #e9eef3;
  /* font-weight: 700; */
}
.el-dropdown {
  position: absolute;
  left: 1300px;
  color: #e9eef3;
  font-size: 22px;
  font-weight: 400;
  line-height: 60px;
}
.title {
  color: rgb(61 119 207);
}
.title:hover {
  cursor: pointer;
  color: rgb(40, 192, 184);
}
/*图标*/
.el-select .el-input .el-select__caret {
  color: #e4ebf1;
}

.coll {
  width: 200px;
  margin-left: 5%;
  margin-top: 3%;
}
.content {
  display: flex;
  flex-flow: column nowrap;
  margin-left: 10%;
  margin-top: 30px;
  margin-right: 10%;
}
.seeall:hover {
  cursor: pointer;
  color: rgb(40, 192, 184);
}
.class1 {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
  line-height: 30px;
  -webkit-box-orient: vertical;
  /* -webkit-line-clamp: 2; */
}
.class2 {
  -webkit-line-clamp: 2;
}
</style>
